<template>
	<view class="modal-goods-ok" v-if="visible" @touchmove.stop.prevent>
		<view class="modal-con">
			<view class="con-title"><text>请输入装货货物重量</text></view>
			<view class="con-detail">
				<view class="detail-item">
					<view class="detail-label"><text>货物重量(吨)</text></view>
					<view class="detail-desc"><input class="input" type="number" v-model="value"
							placeholder="请输入货物重量" />
					</view>
				</view>
			</view>
			<view class="btn-box">
				<view class="btn cancel" @click="cancel"><text>取消</text></view>
				<view class="btn ok" @click="ok"><text>确认</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default () {
					return {}
				}
			},
			visible: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				value: ""
			};
		},
		methods: {
			ok() {
				if (this.value.length == "") {
					uni.showToast({
						title: '请输入货物重量',
						icon: 'none'
					});
					return false;
				}
				if (this.value != Number(this.value)) {
					uni.showToast({
						title: '货物重量应该是数字',
						icon: 'none'
					});
					return false;
				}
				if (Number(this.value) < 0) {
					uni.showToast({
						title: '货物重量需要大于等于0',
						icon: 'none'
					});
					return false;
				}
				// 告诉父级我修改完成了
				this.$emit('confirm', this.value, this.data.id);
				// 关掉弹框
				this.cancel();
			},
			cancel() {
				this.$emit('update:visible', false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modal-goods-ok {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 999;
		display: block;
		box-sizing: border-box;
		background: rgba(0, 0, 0, .5);

		.modal-con {
			position: absolute;
			width: 80%;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			background-color: #fff;
			border-radius: 3px;
			text-align: center;

			.con-title {
				padding: 1em 1.6em .3em;
				font-size: 36rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.con-detail {
				padding: 50rpx;
				font-size: 32rpx;
				line-height: 1.4;
				overflow-x: hidden;
				overflow-y: auto;

				.detail-item {
					display: flex;
					align-items: flex-start;
					line-height: 44rpx;
					margin-bottom: 10rpx;
					text-align: left;
					font-size: 30rpx;

					.detail-label {
						width: 6em;
						font-size: inherit;
						color: #999;
						margin-right: 0.6em;
					}

					.detail-desc {
						flex: 1;
						font-size: inherit;
						color: #333;
						text-align: justify;

						.input {
							font-size: inherit;
						}
					}
				}
			}

			.btn-box {
				padding-bottom: 40rpx;

				.btn {
					display: inline-block;
					border-radius: 2.5em;
					line-height: 2.5em;
					padding: 0 2em;
					border: 4rpx solid #666;
					color: #666;
					margin: 0 0.5em;
				}

				.ok {
					border-color: $app-color;
					color: $app-color;
				}
			}
		}
	}
</style>